<!-- 主视图 -->
<template>
  <div class="web-layout">
    <el-container class="container">
      <!-- <el-aside> -->
        <app-side></app-side>
      <!-- </el-aside> -->
      <div class="inner-container" :class="{innerContainerCollapse: $store.state.web.collapse}">
      <!-- <el-container> -->
        <el-header>
          <app-header>

          </app-header>

        </el-header>
        <el-main>
          <keep-alive :max="3">
            <router-view/>
          </keep-alive>
        </el-main>
      <!-- </el-container> -->
        <a-footer></a-footer>
      </div>
    </el-container>
  </div>
</template>

<script>
import AppSide from './AppSide.vue'
import AppHeader from './AppHeader.vue'
import AFooter from './AFooter.vue'
import { mapActions, mapState } from 'vuex'
import { menuList } from '../userMan/api/userman'
export default {
  components: {
    AppSide,
    AppHeader,
    AFooter
  },
  data () {
    return {}
  },
  computed: {
    ...mapState({
      menuLists: state => state.user.menuLists,
      qjrole: state => state.user.qjrole
    })
  },
  mounted () {
    this.getMenuList()
    this.initApp()
  },
  methods: {
    // 获取部门列表
    async getMenuList () {
      console.log('获取部门列表')
      const res = await menuList({})
      if (res.status === 200) {
        this.$store.state.user.menuLists = res.menuList
        this.$store.state.user.qjrole = res.data[0].role
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    ...mapActions({
      'initApp': 'web/initApp'
    })
  }
}
</script>

<style lang="less">
.web-layout {
  .inner-container {
    overflow-y: auto;
    background: #f2f6fc;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 160px;
    right: 0; }
    .inner-container.innerContainerCollapse{
      left: 64px;
    }
.container {
  background: #ebeff2;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  overflow: hidden; }
  .el-main {
    position: absolute;
    top: 50px;
    bottom: 40px;
    width: 100%;
    overflow: auto;
  }
}

</style>
